<!-- banner start -->
<div class="banner">
            <div class="banner-title">
                <h2>表格</h2>
                <p><code>table.table</code> / 将它放在卡片的主容器<code>.card-body</code>里面</p>
            </div>
            <div class="banner-action">
                <fieldset class="form-group">
                    <select class="select">
                        <option>选项一</option>
                        <option>选项二</option>
                    </select>
                </fieldset>
                <fieldset class="form-group">
                    <input class="input" type="text" placeholder="关键字">
                </fieldset>
                <button type="button" class="button">搜索</button>
                <button type="button" class="button button-green button-collapse" data-toggle="collapse" data-target="#demo-search">高级检索</button>
            </div>
        </div>
        <!-- banner over -->
        <!-- collapse start -->
        <div class="collapse" id="demo-search">
            <div class="collapse-body">
                <!-- form start -->
                <form class="form">
                    <!-- row start -->
                    <div class="form-row">
                        <div class="col-lg-3">
                            <fieldset class="form-group">
                                <legend class="label">表单组件</legend>
                                <input class="input" type="text">
                            </fieldset>
                        </div>
                        <div class="col-lg-3">
                            <fieldset class="form-group">
                                <legend class="label">表单组件</legend>
                                <input class="input" type="text">
                            </fieldset>
                        </div>
                        <div class="col-lg-3">
                            <fieldset class="form-group">
                                <legend class="label">表单组件</legend>
                                <input class="input" type="text">
                            </fieldset>
                        </div>
                        <div class="col-lg-3">
                            <fieldset class="form-group">
                                <legend class="label">表单组件</legend>
                                <input class="input" type="text">
                            </fieldset>
                        </div>
                    </div>
                    <!-- row over -->
                    <div class="form-footer">
                        <p>检索完成, 共找到10条数据</p>
                        <div class="button-group">
                            <button type="button" class="button button-flat" data-toggle="collapse" data-target="#demo-search">关闭</button>
                            <button type="reset" class="button button-cyan">重置</button>
                            <button type="button" class="button button-green">开始检索</button>
                        </div>
                    </div>
                </form>
                <!-- form over -->
            </div>
        </div>
        <!-- collapse over -->
        <!-- container start -->
        <div class="container-fluid">
            <!-- row start -->
            <div class="row">
                <!-- column start -->
                <div class="col-12">
                    <section class="card">
                        <div class="card-header">
                            <h3 class="title">基本样式</h3>
                            <div class="card-header-action">
                                <fieldset class="form-group">
                                    <select class="select">
                                        <option>选项一</option>
                                        <option>选项二</option>
                                    </select>
                                </fieldset>
                                <fieldset class="form-group">
                                    <input class="input" type="text" placeholder="关键字">
                                </fieldset>
                                <button type="button" class="button button-small">搜索</button>
                                <button type="button" class="button button-small button-green button-collapse" data-toggle="collapse" data-target="#demo-search">高级检索</button>
                            </div>
                        </div>
                        <div class="card-body">
                            <!-- table start -->
                            <table class="table table-responsive">
                                <thead>
                                    <tr>
                                        <th align="left">编号</th>
                                        <th align="left">
                                            <fieldset class="form-group">
                                                <label class="radiocheckbox-item">
                                                    <input class="radiocheckbox" type="checkbox" hidden>
                                                    <span class="radiocheckbox-replace"></span>
                                                </label>
                                            </fieldset>
                                        </th>
                                        <th align="left">图片</th>
                                        <th align="left">信息组</th>
                                        <th align="left">字段</th>
                                        <th align="left">标签</th>
                                        <th align="right">相关操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <th align="left">#1</th>
                                        <td align="center">
                                            <fieldset class="form-group">
                                                <label class="radiocheckbox-item">
                                                    <input class="radiocheckbox" type="checkbox" hidden>
                                                    <span class="radiocheckbox-replace"></span>
                                                </label>
                                            </fieldset>
                                        </td>
                                        <td>
                                            <div class="image" style="background-image: url('<?php echo base_url();?>media/zhiyeAdmin/img/avatar-zhouzhengrui.jpg');">
                                            </div>
                                        </td>
                                        <td>
                                            <h6>周正锐</h6>
                                            <p class="gray">zhouzhengrui@maszy.cn</p>
                                        </td>
                                        <td>UI设计 / 前端开发</td>
                                        <td><span class="label label-blue">前端攻城师</span></td>
                                        <td align="right">
                                            <a href="<?php echo base_url();?>zhiye_admin/user/edit"  class="button button-small">编辑</a>
                                            <a href="#" class="button button-small button-green">新增</a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th align="left">#2</th>
                                        <td align="center">
                                            <fieldset class="form-group">
                                                <label class="radiocheckbox-item">
                                                    <input class="radiocheckbox" type="checkbox" hidden>
                                                    <span class="radiocheckbox-replace"></span>
                                                </label>
                                            </fieldset>
                                        </td>
                                        <td>
                                            <div class="image" style="background-image: url('<?php echo base_url();?>media/zhiyeAdmin/img/avatar-shulei.jpg');">
                                            </div>
                                        </td>
                                        <td>
                                            <h6>束磊</h6>
                                            <p class="gray">shulei@maszy.cn</p>
                                        </td>
                                        <td>战略决策 / 项目统筹管理</td>
                                        <td><span class="label label-green">CEO</span></td>
                                        <td align="right">
                                            <a href="#" class="button button-small">编辑</a>
                                            <a href="#" class="button button-small button-cyan">修改</a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th align="left">#3</th>
                                        <td align="center">
                                            <fieldset class="form-group">
                                                <label class="radiocheckbox-item">
                                                    <input class="radiocheckbox" type="checkbox" hidden>
                                                    <span class="radiocheckbox-replace"></span>
                                                </label>
                                            </fieldset>
                                        </td>
                                        <td>
                                            <div class="image" style="background-image: url('<?php echo base_url();?>media/zhiyeAdmin/img/avatar-jinjing.jpg');">
                                            </div>
                                        </td>
                                        <td>
                                            <h6>金晶</h6>
                                            <p class="gray">jinjing@maszy.cn</p>
                                        </td>
                                        <td>方针制定 / 战术运用</td>
                                        <td><span class="label label-purple">销售总监</span></td>
                                        <td align="right">
                                            <a href="#" class="button button-small">编辑</a>
                                            <a href="#" class="button button-small button-purple">查看</a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th align="left">#4</th>
                                        <td align="center">
                                            <fieldset class="form-group">
                                                <label class="radiocheckbox-item">
                                                    <input class="radiocheckbox" type="checkbox" hidden>
                                                    <span class="radiocheckbox-replace"></span>
                                                </label>
                                            </fieldset>
                                        </td>
                                        <td>
                                            <div class="image" style="background-image: url('<?php echo base_url();?>media/zhiyeAdmin/img/avatar-wupeijun.jpg');">
                                            </div>
                                        </td>
                                        <td>
                                            <h6>武佩俊</h6>
                                            <p class="gray">wupeijun@maszy.cn</p>
                                        </td>
                                        <td>项目实行 / 质量、安全、进度、成本管理</td>
                                        <td><span class="label label-cyan">项目经理</span></td>
                                        <td align="right">
                                            <a href="#" class="button button-small">编辑</a>
                                            <a href="#" class="button button-small button-red">删除</a>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <!-- table over -->
                        </div>
                        <div class="card-footer">
                            <div class="button-group">
                                <button type="button" class="button">全选</button>
                                <button type="button" class="button button-red">删除</button>
                            </div>
                            <!-- pagination start -->
                            <div class="button-group-pagination">
                                <span class="info">共99条数据</span>
                                <span>上一页</span>
                                <span class="active">1</span>
                                <a href="#">2</a>
                                <a href="#">3</a>
                                <a href="#">4</a>
                                <a href="#">5</a>
                                <span>...</span>
                                <a href="#">99</a>
                                <a href="#">下一页</a>
                            </div>
                            <!-- pagination over -->
                        </div>
                    </section>
                </div>
                <!-- column over -->
            </div>
            <!-- row over -->
            <!-- row start -->
            <div class="row">
                <!-- column start -->
                <div class="col-12">
                    <section class="code-group">
                        <h6 class="code-title">基本样式</h6>
                        <pre>
                            <code class="language-html">
                                <script type="text/plain">
                                <!-- table start -->
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th>表头居中</th>
                                            <th align="left">表头/左对齐</th>
                                            <th align="right">表头/右对齐</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>单元格/居中</td>
                                            <td align="left">单元格/左对齐</td>
                                            <td align="right">单元格/右对齐</td>
                                        </tr>
                                        <tr>
                                            <td>普通字段</td>
                                            <td><a href="#">超链接字段</a></td>
                                            <td><span class="label">标签</span></td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <!-- 图片单元格 -->
                                                <div class="image" style="background-image: url('');"></div>
                                            </td>
                                            <td>
                                                <!-- 信息组单元格 -->
                                                <h6>信息组主信息</h6>
                                                <p class="gray">信息组附加信息</p>
                                            </td>
                                            <td>
                                                <!-- 按钮单元格 -->
                                                <a class="button button-small" href="#">超链接</a>
                                                <button type="button" class="button button-small">按钮</button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                                <!-- table over -->
                                </script>
                            </code>
                        </pre>
                    </section>
                    <ul class="explain">
                        <li>合理利用<code>align, rowspan, colspan</code>这些表格自身的属性</li>
                        <li>单元格内可以直接放表单组件, 但要去掉<code>legend</code></li>
                        <li>表格里的图片以背景图的方式加载到<code>div.image</code>, 可防止图片变形</li>
                        <li>需要考虑移动端显示效果的话, 给<code>table.table</code>追加<code>.table-responsive</code>类名, 让表格在移动端有一个横向的滚动条</li>
                    </ul>
                    <section class="code-group">
                        <h6 class="code-title">搜索功能区</h6>
                        <pre>
                            <code class="language-html">
                                <script type="text/plain">
                                <fieldset class="form-group">
                                    <select class="select">
                                        <option>选项一</option>
                                        <option>选项二</option>
                                    </select>
                                </fieldset>
                                <fieldset class="form-group">
                                    <input class="input" type="text" placeholder="关键字">
                                </fieldset>
                                <button type="button" class="button">搜索</button>
                                <button type="button" class="button button-green button-collapse" data-toggle="collapse" data-target="#demo-search">高级检索</button>
                                </script>
                            </code>
                        </pre>
                    </section>
                    <ul class="explain">
                        <li><code>.banner-action</code>和<code>.card-header-action</code>里都可以放以上组件来做搜索等功能, 自行选择</li>
                    </ul>
                    <section class="code-group">
                        <h6 class="code-title">高级检索面板</h6>
                        <pre>
                            <code class="language-html">
                                <script type="text/plain">
                                <!-- collapse start -->
                                <div class="collapse" id="demo-search">
                                    <div class="collapse-body">
                                        <!-- form start -->
                                        <form class="form">
                                            <!-- row start -->
                                            <div class="form-row">
                                                <div class="col-lg-3">
                                                    <!-- 表单组件 -->
                                                </div>
                                                <div class="col-lg-3">
                                                    <!-- 表单组件 -->
                                                </div>
                                                <div class="col-lg-3">
                                                    <!-- 表单组件 -->
                                                </div>
                                                <div class="col-lg-3">
                                                    <!-- 表单组件 -->
                                                </div>
                                            </div>
                                            <!-- row over -->
                                            <div class="form-footer">
                                                <p>检索信息</p>
                                                <div class="button-group">
                                                    <button type="button" class="button button-flat" data-toggle="collapse" data-target="#demo-search">关闭</button>
                                                    <button type="reset" class="button button-cyan">重置</button>
                                                    <button type="button" class="button button-green">开始检索</button>
                                                </div>
                                            </div>
                                        </form>
                                        <!-- form over -->
                                    </div>
                                </div>
                                <!-- collapse over -->
                                </script>
                            </code>
                        </pre>
                    </section>
                    <ul class="explain">
                        <li>放在<code>.banner</code>下面, id与高级检索按钮相对应</li>
                    </ul>
                </div>
                <!-- column over -->
            </div>
            <!-- row over -->
        </div>
        <!-- container over -->
        <!-- page script start -->
        <script type="text/javascript">
            jQuery(document).ready(function($) {
                // 代码块
                $.when(
                    $.getScript('js/clipboard/clipboard.min.js'),
                    $.getScript('js/prism/prism.js'),
                    $.getScript('js/prism/prism-copy.js')
                ).then(function() {
                    Prism.highlightAll();
                });
            });
        </script>
        <!-- page script over -->